<!--
 * @Author       : shenqing
 * @desc         : 页面布局-面包屑导航
 * @Date         : 2022-10-14 11:26:40
 * @LastEditTime : 2022-10-14 15:33:06
 * @LastEditors  : shenqing
 * @FilePath     : \questionnaire\src\components\layout-breadcrumb.vue
-->
<template>
    <div class='layout-breadcrumb-box'>
        <el-breadcrumb separator-class="el-icon-arrow-right"
                       :class="{'multi-breadcrumb':levelList.length>1}">
            <el-breadcrumb-item v-for="(item,index)  in levelList"
                                :key="item.path"
                                v-if="item.meta.title"
                                @click.native="toPage(item,index)"
                                :class="[levelList.length===1?'single-breadcrumb':'']">
                {{item.meta.title}}
            </el-breadcrumb-item>
        </el-breadcrumb>
        <div class="btns">
            <el-button v-if="this.$route.meta.back"
                       @click="goBack"
                       type="info"
                       plain
                       size="mini">返回</el-button>
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    mixins: [],
    components: {

    },
    props: {

    },
    data () {
        return {
            levelList: []
        }
    },
    computed: {

    },
    watch: {
        $route (to, from) {
            this.getBreadcrumb()
        }
    },
    created () {

    },
    mounted () {
        this.getBreadcrumb()
    },
    destroyed () {

    },
    methods: {
        getBreadcrumb () {
            let matched = this.$route.matched.filter(item => item.meta.title)
            this.levelList = (function () {
                let tempArray = []
                matched.forEach(item => {
                    if (item.path === '') {
                        tempArray.push({ path: '/', meta: { title: '首页' } })
                    } else {
                        tempArray.push(item)
                    }
                })
                return tempArray
            })()
        },
        toPage (item, index) {
            if (index === 0 || index === 1) {
                this.$router.push({ path: index !== (this.levelList.length - 1) ? item.redirect || item.path : '' })
            } else if (index !== this.levelList.length - 1) {
                let backIndex = index - this.levelList.length
                this.$router.back(backIndex)
            }
        },
        goBack () {
            this.$router.back(-1)
        }
    }
}
</script>
<style scoped lang='stylus'>
.layout-breadcrumb-box {
    height: 0.64rem
    border-bottom: 1px solid #EBEBEB
    padding: 0 0.24rem
    display: flex
    align-items: center
    justify-content: space-between
    .single-breadcrumb {
        >>>.el-breadcrumb__inner {
            color: #333
            font-size: 0.18rem
            font-weight: bold
        }
    }
}
</style>
<style lang='stylus'>
.layout-breadcrumb-box {
    .multi-breadcrumb {
        .el-breadcrumb__item {
            .el-breadcrumb__inner {
                font-size: 0.14rem
                color: #999999
            }
        }
        .el-breadcrumb__separator {
            font-size: 0.11rem
            color: #666
            font-weight: bold
            margin: 0 0.08rem
        }
    }
    .multi-breadcrumb {
        .el-breadcrumb__item:last-child {
            .el-breadcrumb__inner {
                font-size: 0.14rem
                color: #666666
                font-weight: bold
            }
        }
    }
}
</style>
